import React, {Component} from 'react'
import '../../css/Head.css'
import css from 'classnames'

export default class Head extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: ['头条', '社会', '国内', '国际', '娱乐', '体育']
        };
        this.state.c = 0
    }

    changeUserInfo(index) {
        this.setState({c: index});
    }

    render() {
        return (
            <header id="head">
                <div className="head w1200">
                    <div className="logo">
                        <span><img src="./src/img/logo.png" alt=""/></span>
                        ReactNews
                    </div>
                    {
                        React.Children.map(this.state.data, function (child, index) {
                            return <span className={css({"span": true, "cur": this.state.c == index})}
                                         onClick={this.changeUserInfo.bind(this, index)}>{child}{index}</span>
                        }.bind(this))
                    }
                </div>
            </header>
        )
    }
}